<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>

	<style type="text/css">
.ui-layout-north {
	z-index: 20 !important;
	overflow: visible;
}

.ui-layout-north .ui-layout-unit-content {
	overflow: visible;
}

.ui-widget {
	font-size: 9px !important;
}

.fonteSize {
	font-size: 12px !important;
}

.centro {
	width: 44%;
	position: absolute;
	top: 20%;
	left: 28%;
}

.vermelho {
	color: #e33b06;
	background-color: red;
	background-image: none;
}
</style>

	<script type="text/javascript">
		PrimeFaces.locales['pt'] = {
			closeText : 'Fechar',
			prevText : 'Anterior',
			nextText : 'Próximo',
			currentText : 'Começo',
			monthNames : [ 'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio',
					'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro',
					'Novembro', 'Dezembro' ],
			monthNamesShort : [ 'Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun',
					'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez' ],
			dayNames : [ 'Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta',
					'Sexta', 'Sábado' ],
			dayNamesShort : [ 'Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb' ],
			dayNamesMin : [ 'D', 'S', 'T', 'Q', 'Q', 'S', 'S' ],
			weekHeader : 'Semana',
			firstDay : 0,
			isRTL : false,
			showMonthAfterYear : false,
			yearSuffix : '',
			timeOnlyTitle : 'Só Horas',
			timeText : 'Tempo',
			hourText : 'Hora',
			minuteText : 'Minuto',
			secondText : 'Segundo',
			ampm : false,
			month : 'Mês',
			week : 'Semana',
			day : 'Dia',
			allDayText : 'Todo o Dia'
		};
	</script>

	<title>Gestão de TI</title>
</h:head>

<h:body>

	<ui:decorate template="/templateBase.xhtml">
		<ui:define name="center">
			<p:growl id="growl" life="3000" autoUpdate="false" />
			<h:form id="me" acceptcharset="ISO-8859-1" lang="pt">
				<div align="center"></div>

				<p:tabView>
					<br />

					<p:tab title="Agendamento">
						<p:schedule value="#{agendaRecursoBacking.eventModel}"
							slotMinutes="30" locale="pt" axisFormat="H:mm" timeFormat="H:mm" />
					</p:tab>

					<p:tab title="Equipamentos">
						<div align="right">
							<p:commandButton value="Atualizar" update="tbl_gti"
								icon="ui-icon-refresh"
								title="Clique para atualizar a tabela de equipamentos" />
						</div>
						<br />
						<p:dataTable value="#{gestaoTIBacking.listaEquipamento}" var="gti"
							paginator="true" rows="10"
							emptyMessage="Não há registros de equipamentos" id="tbl_gti">

							<p:column headerText="ID">
								<div align="center">
									<h:outputLabel value="#{gti.id}" />
								</div>
							</p:column>

							<p:column headerText="Tipo" sortBy="#{gti.tipo.descricao}">
								<div align="center">
									<h:outputLabel value="#{gti.tipo.descricao}" />
								</div>
							</p:column>

							<p:column headerText="Descrição">
								<h:outputLabel value="#{gti.descricao}" />
							</p:column>

							<p:column headerText="Departamento" sortBy="#{gti.depto.nome}">
								<div align="center">
									<h:outputLabel value="#{gti.depto.nome}" />
								</div>
							</p:column>

							<p:column headerText="Status" sortBy="#{gti.status}">
								<div align="center">
									<h:outputLabel value="#{gti.status}" />
								</div>
							</p:column>

							<p:column headerText="Detalhes">
								<div align="center">
									<p:commandButton icon="ui-icon-search"
										onclick="dgl_equipamento.show()"
										action="#{gestaoTIBacking.detalhesEquipamento(gti.id)}"
										update=":detalhe" process="@this"
										title="Clique para visualizar os detalhes do equipamento" />
								</div>
							</p:column>
						</p:dataTable>

					</p:tab>

					<p:tab title="Manutenção" disabled="true">

					</p:tab>
				</p:tabView>

			</h:form>

			<p:dialog header="Detalhes do Equipamento"
				footer="Integração - Portal de serviços e integração"
				id="id_dgl_equipamento" showEffect="clip" height="450" width="700"
				widgetVar="dgl_equipamento" appendToBody="true" modal="true">

				<h:form id="detalhe" acceptcharset="ISO-8859-1" lang="pt">
					<br />

					<h:outputText value="ID" />
					<h:panelGrid columns="2">
						<p:inputText size="5" readonly="true"
							value="#{gestaoTIBacking.equipamento.id}" />

					</h:panelGrid>

					<h:panelGrid>

						<h:outputText value="Tipo" />
						<p:inputText value="#{gestaoTIBacking.equipamento.tipo.descricao}"
							readonly="true" />

						<h:outputText value="Descrição" />
						<p:inputText size="80" required="true"
							requiredMessage="Informe a descrição para o equipamento!"
							value="#{gestaoTIBacking.equipamento.descricao}" readonly="true" />

						<p:inputText size="20" value="#{gestaoTIBacking.equipamento.ip}"
							id="txtIp" rendered="#" readonly="true" />
					</h:panelGrid>

					<h:panelGrid columns="3">

						<h:panelGrid>
							<h:outputText value="Departamento" />
							<p:inputText readonly="true" size="50"
								value="#{gestaoTIBacking.equipamento.depto.nome}" />
						</h:panelGrid>

						<h:panelGrid>
							<h:outputText value="Marca" />
							<p:inputText readonly="true" size="30"
								value="#{gestaoTIBacking.equipamento.marca.descricao}" />
						</h:panelGrid>

						<h:panelGrid>
							<h:outputText value="Status" />
							<p:inputText readonly="true" size="30"
								value="#{gestaoTIBacking.equipamento.status}" />
						</h:panelGrid>

					</h:panelGrid>

					<br />
					<p:separator />

					<br />
					<p:panel header="Componentes">

						<p:dataTable value="#{gestaoTIBacking.listaComponentes}" var="com"
							id="tblComponentes"
							emptyMessage="Não há componente(s) para este equipamento "
							paginator="true" rows="4">

							<p:column headerText="Qtd. ">
								<div align="center">
									<h:outputText value="#{com.quantidade}" />
								</div>
							</p:column>

							<p:column headerText="Componente ">
								<h:outputText value="#{com.componente.descricao}" />
							</p:column>

							<p:column headerText="Tamanho ">
								<div align="center">
									<h:outputText value="#{com.tamanho}" />
								</div>
							</p:column>

							<p:column headerText="Unid. de Medida">
								<div align="center">
									<h:outputText value="#{com.unidMedida}" />
								</div>
							</p:column>

						</p:dataTable>
					</p:panel>
					<br />

				</h:form>

			</p:dialog>

		</ui:define>
	</ui:decorate>
</h:body>
</html>